<!-- 
 
    ref 和 reactive 都是用来将对象变为响应式对象的  
    ref 可以接收 基本类型和对象类型
    reactive 只能接受对象类型
 
-->
<template>
    <div class="person">
        <h2>姓名：{{ name }}</h2>
        <h2>年龄:{{ age }}</h2>

        <button @click="changeName"> 修改名字</button>
        <button @click="changeAge"> 年龄+1</button>
        <button @click="showTel">加个联系方式呗 </button>

        <br />

        <!-- reactive 创建：对象类型的响应式数据 -->
        <h2>汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }} 万</h2>
        <h2>游戏列表：</h2>
        <ul>
            <li v-for="g in games" :key="g.id">{{ g.name }}</li>
        </ul>
        <h1> 深层次的对象嵌套测试：</h1>
        <h2>{{ a.b.c.d.e }}</h2>

        <button @click="changePrice">修改汽车价格</button>
        <button @click="changeFirstGame">修改第一个游戏名称</button>
        <button @click="changeComplexObj">修改复杂对象名称</button>
    </div>
</template>

<script setup lang="ts" name="person">
// 这是在干嘛？引入组件嘛 这个算
import { ref } from 'vue'
import { reactive } from 'vue'

//使用ref包裹的对象就是响应式对象，
//就是当值变了能立马反应出来到页面上

let name = ref('张三')
let age = ref(18)
let tel = 13888888888

let a = ref({
    b: {
        c: {
            d: {
                e: ' pardon feifei  i am sincere apology '
            }
        }
    }
})

function changeName() {
    name.value = 'Zhan-San'
}

function changeAge() {
    age.value += 1
}

function showTel() {
    alert(tel)
}

// 下面是用 reactive 修饰的对象

let car = reactive({
    "brand": "BMW",
    "price": 60
})

let games = reactive([
    { id: "dadaddad", name: "王者荣耀" },
    { id: "dsadsadsvffr", name: "英雄联盟" },
    { id: "35t54g", name: "PAFG" },
    { id: "fregfdve4", name: "穿越火线" },
    { id: "12ewqdfr3", name: "大明王朝" },
])

function changePrice() {
    car.brand = "迈巴赫",
        car.price = 320
}


function changeFirstGame() {
    games[0].name = "王者农药";
}

function changeComplexObj() {
    a.value.b.c.d.e = 'you scareced me !!!'
}

</script>

<style lang="css">
.person {
    /**width: 100px;**/
    background-color: aqua;
}
</style>